<template>
  <div id="swipe">
    <van-swipe class="my-swipe" :loop="false" :show-indicators="false" ref="my_swipe">
      <van-swipe-item>
        <img :src="allDataList.list[activeIndex] && allDataList.list[activeIndex].box_img_src" alt="" @click="clickCheck"/>
      </van-swipe-item>
    </van-swipe>
    <div class="home-card" v-if="homeIsShow" @click="goHomePage">
      <div class="box">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/home.png" alt="">
        <span>盲盒首页</span>
      </div>
    </div>
    <div class="side-card">
      <div class="box" @click="clickService">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/service.png" alt="" />
        <span>客服</span>
      </div>
      <div class="box" @click="goToMyBindBox">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/box.png" alt="" />
        <span>我的盲盒</span>
      </div>
      <div class="box" @click="postShow">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/poster.png" alt="" />
        <span>海报</span>
      </div>
    </div>
    <div class="check-goods" v-if="goodsIsShow">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/click_check.png" alt="" @click="clickCheck"/>
      <span class="name" @click="clickCheck">查看商品</span>
    </div>
    <div id="scatter">
      <li
        :class="isMoreNum ? 'active-li-pubush' : 'li-pubush'"
        v-for="(item, index) in bubbleData"
        :key="index"
        :style="{ top: item.top , left: item.left, width: item.width + 'rem', height: item.width + 'rem', animationDuration: item.time + 's' }"
      >
        <span :style="{ width: item.width + 'rem' }"><img :src="item.thumb" class="img-style"/></span>
      </li>
    </div>
    <!-- <yz-goodsposter v-model="posterShow"  :defaultImg="posterImg"></yz-goodsposter> -->
    <yzService  v-model="onlineShow" :url='allDataList.customer_service.cservice' :mobile='allDataList.customer_service.service_mobile' :qr="allDataList.customer_service.service_QRcode"></yzService>
      <van-popup class="poster-popup-class" v-model="posterShow" round get-container="body">
        <div id="goods-poster-main">
          <div class="yz-goods-canvas" >
            <img :src="posterImg" style="width: 100%; border-radius: 16px; object-fit: contain; height: 100%;" id="goods_poster_thecanvas" />
          </div>
        </div>
      </van-popup>
  </div>
</template>

<script>
import index_controller from "./index_controller";
export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pop-content {
  width: 100%;
  padding: 3.1875rem 0;
  text-align: center;
  border-radius: 1.1875rem;
  background: #fff;

  .pop-top {
    display: flex;
    align-items: unset;
    justify-content: center;

    .left {
      width: 50%;
      display: flex;
      justify-content: center;

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        .wrap-mobile {
          margin-top: 0.5rem;
        }

        .image {
          width: 2.625rem;
          height: 2.625rem;
          margin-bottom: 0.5rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .line-box {
      display: flex;
      align-items: center;
    }

    .line {
      width: 1px;
      height: 1.625rem;
      background-color: #999;
    }

    .right {
      width: 50%;
      display: flex;
      justify-content: center;

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        .image {
          width: 2.625rem;
          height: 2.625rem;
          margin-bottom: 0.5rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .pop-bottom {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;

    .service-qrcode {
      width: 100%;
      height: 100%;
    }

    .image {
      width: 50%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .icon-close11 {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 18px;
  }
}

#scatter {
  // width: 3.75rem;
  // height: 300px;
  position: relative;
  top: -5.95rem;

  .img-style {
    width: 2.2rem;
    height: 2.2rem;
    vertical-align: bottom;
  }

  li {
    background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/bubble.png') no-repeat;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .active-li-pubush {
    opacity: 0.7;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: minibubble 10s infinite;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    span {
      color: #fff;
      font-size: 12px;
      text-align: center;
      padding: 0 5px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .li-pubush {
    opacity: 0.7;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: minibubble 10s;
    animation-timing-function: linear;
    // animation-fill-mode: none;
    // animation-iteration-count: infinite;

    span {
      color: #fff;
      font-size: 12px;
      text-align: center;
      padding: 0 5px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // .li-active {
  //   position: relative;
  //   opacity: 0;
  //   animation: mymove 8s steps(2);
  //   animation-timing-function: linear;
  //   // animation-fill-mode: both;
  //   // animation-iteration-count: infinite;
  //   border-radius: 50%;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: center;
  //   align-items: center;
  // }

  // @keyframes mymove {
  //   0% {
  //     // transform: translateY(-7.15rem) rotate(0deg);
  //     left: 3.5rem;
  //     opacity: 1;
  //   }

  //   80% {
  //     opacity: 0.8;
  //   }
  //   85% {
  //     opacity: 0.7;
  //   }
  //   90% {
  //     opacity: 0.6;
  //   }
  //   100% {
  //     opacity: 0;
  //     left: 12rem;
  //     transform: translateY(-10.5rem) rotate(0deg);
  //   }
  // }

  // .li-active2 {
  //   position: relative;
  //   animation: minibubble 6s;
  //   animation-timing-function: linear;
  //   // animation-fill-mode: both;
  //   // animation-iteration-count: infinite;
  //   border-radius: 50%;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: center;
  //   align-items: center;
  // }

  // @keyframes mymove2 {
  //   0% {
  //     left: 10rem;
  //     transform: translateY(-8.75rem) rotate(0deg);
  //   }

  //   50% {
  //     left: 5rem;
  //   }

  //   80% {
  //     opacity: 0.8;
  //   }

  //   85% {
  //     opacity: 0.7;
  //   }

  //   90% {
  //     opacity: 0.6;
  //   }

  //   100% {
  //     left: 8rem;
  //     opacity: 0;
  //     transform: translateY(-19.5rem) rotate(0deg);
  //   }
  // }

  @keyframes minibubble {
    0% {
      opacity: 1;
      // -webkit-transform: translateY(-6.95rem) rotate(0deg);
    }

    80% {
      opacity: 0.8;
    }

    85% {
      opacity: 0.7;
    }

    90% {
      opacity: 0.6;
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-10.5rem) rotate(0deg);
    }
  }
}

#swipe {
  height: 12.8rem;
  background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/mask.png");
  background-repeat: no-repeat;
  background-size: 55% 85%;
  background-position: center center;
  position: relative;

  .my-swipe {
    img {
      width: 6.5rem;
      height: 6.5rem;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 2.8rem;
    }
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    height: 12.5rem;
    text-align: center;
  }

  .side-card {
    position: absolute;
    right: 0.68rem;
    top: -5.95rem;
  }

  .box {
    display: flex;
    flex-direction: column;
    color: white;
    margin-bottom: 0.95rem;
    align-items: center;

    span {
      line-height: 1;
    }

    img {
      width: 2.1rem;
      height: 2.1rem;
      margin-bottom: 0.5rem;
      margin-right: 0;
      margin-left: 0;
    }

    span {
      font-size: 0.6rem;
    }
  }

  .home-card {
    position: absolute;
    left: 1.25rem;
    top: -3.85rem;
  }

  .check-goods {
    color: white;
    position: absolute;
    bottom: 1.7rem;
    margin: auto;
    left: 0;
    right: 0;
    color: white;
    z-index: 10;

    img {
      width: 0.8rem;
    }

    .name {
      font-size: 0.75rem;
      vertical-align: text-top;
      margin-left: 0.3rem;
    }
  }
}

// 海报
.poster-popup-class {
  background-color: transparent !important;
}

#goods-poster-main {
  width: 20rem;
  height: 31.5rem;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;

  canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .yz-goods-canvas {
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
  }

  .yz-goods {
    width: 20rem;
    height: 31.5rem;
    background-size: 100% 100%;
    background-position: bottom center;
    position: absolute;
    left: -120%;

    .ewm_bgImg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    .diy_poster_child {
      position: absolute;
      overflow: hidden; /* 超出部分隐藏 */
      p {
        width: 100%;
        text-align: left;
        overflow: hidden; /* 超出部分隐藏 */
        // text-overflow: ellipsis; /* 超出部分显示省略号 */
        // white-space: nowrap; /*规定段落中的文本不进行换行 */
      }
    }

    .poster-top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.5rem;
      padding-top: 0.5rem;

      .logo {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        overflow: hidden;
        margin: 0;
      }

      .top-name {
        font-size: 0.875rem;
        color: #666;
        margin-left: 0.875rem;
      }
    }

    .poster-thumb {
      margin-bottom: 0.375rem;

      img {
        display: block;
        width: 16.875rem;
        height: 16.875rem;
        // object-fit: cover;
        margin: 0 auto;
      }
    }

    .poster-price {
      padding: 0 0.875rem;
      display: flex;
      align-items: flex-end;
      font-size: 1rem;
      color: #f15353;
      margin-bottom: 0.125rem;

      .poster-market-price {
        font-size: 0.75rem;
        color: #666;
        margin-left: 0.5rem;
        text-decoration: line-through;
      }
    }

    .poster-title {
      font-size: 1rem;
      line-height: 1.25rem;
      height: 2.5rem;
      color: #000;
      text-align: left;
      margin-bottom: 0.875rem;
      padding: 0 0.875rem;
    }

    .poster-bottom {
      padding: 0 0.875rem;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;

      .poster-ewm {
        width: 5.5rem;
        height: 5.5rem;
        margin: 0;
      }
    }
  }
}
</style>
